<template>
  <ul class="tab-bar">
    <router-link
      tag="li"
      v-for="nav in navs"
      :key="nav.path"
      :to="nav.path"
    >
      <i class="iconfont" v-html="nav.meta.icon"></i>
      <span>{{ nav.meta.title }}</span>
    </router-link>
  </ul>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'TabBar',
  computed: {
    // 计算在 tabbar 上渲染的各项
    navs() {
      // return routes.filter(route => route.meta && route.meta.inTabBar)
      return routes.filter(route => route.meta?.inTabBar)
    },
  },
}
</script>

<style lang="less" scoped>
  .tab-bar {
    height: 100px;
    display: flex;
    border-top: 1px solid #eaeaea;

    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      i {
        font-size: 20px;
      }
      span {
        font-size: 12px;
      }
    }
  }

  .router-link-exact-active, .router-link-active {
    font-weight: 700;
    color: #d81e06;
  }
</style>

<style lang="less">
</style>
